<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<style>
		.class1{
			background: #444;
			color: #eee;
		}
	</style>
</head>
<body>
	<!-- 使用 v-html 指令用于输出 html 代码： -->
	<div id="app">
		<div v-html="message"></div>
	</div>
	<!-- HTML 属性中的值应使用 v-bind 指令 -->
	<div id="app2">
		<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
		<br><br>
		<div v-bind:class="{'class1': use}">
			v-bind:class 指令
		</div>
	</div>
	<!-- 提供了完全的 JavaScript 表达式支持 -->
	<div id="app3">
		{{5+5}}<br>
		{{ ok ? 'YES' : 'NO' }}<br>
		{{ message.split('').reverse().join('') }}
		<div v-bind:id="'list-' + id">菜鸟教程</div>
	</div>
	<!--  v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素 -->
	<div id="app4">
		<p v-if="seen">现在你看到我了</p>
	</div>
	<!-- v-bind 指令被用来响应地更新 HTML 属性   缩写<a @click="doSomething"></a>  -->
	<div id="app5">
		<pre><a v-bind:href="url">baidu</a></pre>
	</div>
	<!-- 在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定 -->
	<!-- v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值 -->
	<div id="app6">
		<p>{{message}}</p>
		<input v-model="message"/>
	</div>
	<!-- 按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应  缩写<a :href="url"></a>-->
	<div id="app7">
		<p>{{message}}</p>
		<button v-on:click="reverseMessage">反转字符串</button>
	</div>
	<!-- Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示 -->
	<!-- 过滤器函数接受表达式的值作为第一个参数 -->
	<!-- 以下实例对输入的字符串第一个字母转为大写 -->
	<div id="app8">
		{{ message | capitalize }}
	</div>
	<!--  v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素 -->
	<div id="app9">
		<p v-if="seen">你能看到我</p>
		<template v-if="ok">
			<h1>Hello Vue</h1>
		</template>
	</div>
	<!-- 可以用 v-else 指令给 v-if 添加一个 "else" 块 -->
	<div id="app10">
		<div v-if="Math.random() > 0.5">
			Sorry
		</div>
		<div v-else>
			Not sorry
		</div>
	</div>
	<!-- v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用 -->
	<div id="app11">
		<div v-if="type === 'A'">
			A
		</div>
		<div v-else-if="type === 'B'">
			B
		</div>
		<div v-else-if="type === 'C'">
			C
		</div>
		<div v-else>
			Not A/B/C
		</div>
	</div>
	<!-- 我们也可以使用 v-show 指令来根据条件展示元素： -->
	<div id="app12">
		<h1 v-show="ok">Hello!</h1>
	</div>
	<script type="text/javascript">
		var app12 = new Vue({
			el: '#app12',
			data: {
				ok: true
			}
		});
		var app11 = new Vue({
			el: '#app11',
			data: {
				type: 'B'
			}
		});
		var app10 = new Vue({
			el: '#app10'
		});
		var app9 = new Vue({
			el: '#app9',
			data: {
				seen: true,
				ok: true
			}
		});
		var app8 = new Vue({
			el: '#app8',
			data: {
				message: 'hello'
			},
			filters: {
				capitalize: function(value){
					if (!value) return ''
					value = value.toString()
					return value.charAt(0).toUpperCase() + value.slice(1)
				}
			}
		}); 
		var app7 =new Vue({
			el: '#app7',
			data: {
				message: 'Hello Vue'
			},
			methods: {
				reverseMessage: function(){
					this.message = this.message.split('').reverse().join('')
				}
			}
		});
		var app6 = new Vue({
			el: '#app6',
			data: {
				message: 'Hello Vue'
			}
		});
		var app5 = new Vue({
			el: "#app5",
			data: {
				url: 'http://www.baidu.com'
			}
		});
		var app = new Vue({
			el: "#app",
			data: {
				message : '<h1>正在学习Vue</h1>'
			}
		});
		var app2 = new Vue({
			el: "#app2",
			data: {
				use : false
			}
		});
		var app3 = new Vue({
			el: '#app3',
			data: {
				ok: true,
				message: '学习vue',
				id: 1
			}
		});
		var app4 = new Vue({
			el: '#app4',
			data: {
				seen: true
			}
		});
	</script>
</body>
</html>